<!--
 * @Description: 插件dom结构
 * @Author: laoyuan
 * @Date: 2023-04-18 10:30:16
-->
<template>
  <div class="toast-container">
    <div class="toast">
      <span>{{ props.message }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
  const props = defineProps<{ message: string }>();
</script>
<style lang="scss">
  .toast-container {
    position: absolute;
    inset: 50% 5px 8px 10px;
    z-index: 2000;
    margin-top: -20px;
    .toast {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 150px;
      min-height: 40px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      background-color: rgb(0 0 0 / 61%);
      border-radius: 10px;
    }
  }
</style>
